<div class="wrapper-bz-page">
    <div class="wrapper-bz-filter">
        <div class="filter-item"><span><label>诗名:</label><input id="ele_input_title_in_poem_list" class="easyui-textbox"
                                                                style="width:100px;"/></span></div>
        <div class="filter-item"><span><label>朝代:</label><input id="ele_select_dynasty_in_poem_list"/></span></div>
        <div class="filter-item"><span><label>诗人:</label><input id="ele_input_poet_in_poem_list" class="easyui-textbox"
                                                                style="width:100px;"/></span></div>
        <div class="filter-item"><span><label>等级:</label><input id="ele_select_poem_level_in_poem_list"/></span></div>
        <div class="filter-item"><span><label>内容:</label><input id="ele_input_content_in_poem_list"
                                                                class="easyui-textbox" style="width:100px;"/></span>
        </div>
        <button class="title-tool" id="btn_search_poem"><i class="fa fa-search"></i>查询</button>
        <button class="title-tool" id="btn_reset_poem"><i class="fa fa-repeat"></i>重置</button>
    </div>
    <div class="wrapper-bz-body" >
        <table id="table_lib_poem" style="width:100%;height:100%"></table>
    </div>
</div>
<div id="dialog_add_lib_poem"></div>
<div id="dialog_edit_lib_poem"></div>
<div id="box_view_lib_poem" class="box-pop hide"></div>

<script>
    $(function () {
        var subject = "lib_poem";
        //列表-对话框-表单
        var tableId = '#table_' + subject;
        var addDialogId = '#dialog_add_' + subject;
        var editDialogId = '#dialog_edit_' + subject;
        var viewBoxId = '#box_view_' + subject;
        var addFormId = '#form_add_' + subject;
        var editFormId = '#form_edit_' + subject;
        var paramDataAdd = {};
        var searchBtnId = '#btn_search_' + subject;
        var resetBtnId = '#btn_reset_' + subject;

        var configDialogAdd = {
            href: '/admin/LibPoem/pageAdd',
            title: '新增诗词',
            queryParams: {},
            width: '80%',
            height: 600,
            modal: true,
            buttons: [{
                text: '<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain: true,
                handler: function () {
                    var loading = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    paramDataAdd = $(addFormId).serializeObject();
                    console.log(paramDataAdd);
                    if (!paramDataAdd.title) {
                        layer.msg("请填写诗词名");
                        return;
                    }

                    $.ajax({
                        url: 'api/poem/add',
                        async: false,
                        type: 'post',
                        data: paramDataAdd,
                        success: function (resp) {
                            console.log(resp);
                            console.log("conme here");
                            layer.close(loading);
                            if (1 == resp.code) {
                                $(addDialogId).dialog('close');
                                $(tableId).datagrid('reload');
                            } else {
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            }, {
                text: '<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain: true,
                handler: function () {
                    $(addDialogId).dialog('close');
                }
            }]
        };
        var configDialogEdit = {
            href: 'admin/poem/edit',
            title: '编辑诗词',
            queryParams: {},
            width: '80%',
            height: 600,
            modal: true,
            buttons: [{
                text: '<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain: true,
                handler: function () {
                    var loading = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    paramDataEdit = $(editFormId).serializeObject();
                    console.log(paramDataEdit);
                    if (!paramDataEdit.title) {
                        layer.msg("请填写诗词名");
                        return;
                    }

                    $.ajax({
                        url: 'api/poem/edit',
                        async: false,
                        type: 'post',
                        data: paramDataEdit,
                        success: function (resp) {
                            layer.close(loading);
                            if (1 == resp.code) {
                                $(editDialogId).dialog('close');
                                $(tableId).datagrid('reload');
                            } else {
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            }, {
                text: '<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain: true,
                handler: function () {
                    $(editDialogId).dialog('close');
                }
            }]
        };
        var configDialogView = {
            href: 'admin/poem/view',
            title: '查看诗词',
            queryParams: {},
            width: '50%',
            height: 600,
            modal: true,
        };
        var configDatagrid = {
            url: '/api/LibPoem/getLibPoemList',
            method: 'post',
            remoteSort: true,
            pageList: [30, 60, 90, 120],
            pageSize: 30,
            pagination: true,
            clickToEdit: false,
            dblclickToEdit: true,
            singleSelect: true,
            rownumbers: false,
            checkOnSelect: false,
            fitColumns: true,
            fit: true,
            frozenColumns: [[
                {field: 'ck', title: 'ck', checkbox: true},
                {field: 'id', title: 'ID', hidden: true},
                {field: 'title', title: '诗名', width: 300},
                {field: 'dynasty', title: '朝代', width: 100, sortable: true},
                {field: 'poet', title: '诗人', width: 100, sortable: true},
                {field: 'poem_level', title: 'Level', hidden: true},
                {
                    field: 'status', title: '状态', width: 100, align: 'center', formatter: function (value, row, index) {
                        if (1 == value) {
                            return '<span class="cell cell-yes">在线</span>';
                        } else if (2 == value) {
                            return '<span class="cell cell-middle">草稿</span>';
                        } else {
                            return '<span class="cell cell-no">下架</span>';
                        }
                    }
                },
            ]],
            columns: [[
                {field: 'create_time', title: '创建时间', width: 150},
                {field: 'update_time', title: '更新时间', width: 150},
            ]],
            loadFilter: function (data) {
                return loadFilter(data, true);
            },
            onClickCell: function (index, fieldName, fieldValue) {
                var rows = $(tableId).datagrid('getRows');
                var row = rows[index];
                if ('title' == fieldName) {
                    if (row.id == $(viewBoxId).attr('data')) {
                        $(viewBoxId).toggleClass("hide");
                    } else {
                        $(viewBoxId).html(getRowDetailHtml(row));
                        $(viewBoxId).attr('data', row.id);
                        $(viewBoxId).removeClass("hide");
                    }
                }
            },
            onDblClickCell: function (index, fieldName) {
            },
            onEndEdit: function (index, row, changes) {
                // if ('{}' == JSON.stringify(changes)) {
                //     return;
                // }
                // var paramDataEdit = {id: row.id};
                // if (changes.hasOwnProperty('is_homepage')) {
                //     paramDataEdit = $.extend(paramDataEdit, {is_homepage: changes.is_homepage});
                // }
                // if (changes.hasOwnProperty('is_top')) {
                //     paramDataEdit = $.extend(paramDataEdit, {is_top: changes.is_top});
                // }
                // if (changes.hasOwnProperty('is_homepage') || changes.hasOwnProperty('is_top')) {
                //     $.ajax({
                //         url: 'api/poem/edit',
                //         async: false,
                //         type: 'post',
                //         data: paramDataEdit,
                //         success: function (resp) {
                //             if (0 == resp.code) {
                //                 layer.msg("编辑失败");
                //             } else {
                //                 $(tableId).datagrid("reload");
                //             }
                //         }
                //     });
                // }
            },
            toolbar: [
                {
                    text: '<i class="fa fa-plus" style="color:orange"></i> 新增',
                    plain: true,
                    handler: function () {
                        $(addDialogId).dialog(configDialogAdd);
                    }
                },
                {
                    text: '<i class="fa fa-pencil" style="color:deepskyblue"></i> 编辑',
                    plain: true,
                    handler: function () {
                        var checkList = getCheckedRowData("编辑");
                        if (!checkList) {
                            return false;
                        }
                        configDialogEdit.queryParams = {id: checkList[0].id}
                        $(editDialogId).dialog(configDialogEdit);
                    }
                },
                {
                    text: '<i class="fa fa-trash" style="color:red"></i> 删除',
                    plain: true,
                    handler: function () {
                        var checkList = getCheckedRowData("删除");
                        if (!checkList) {
                            return false;
                        }
                        var idArr = [];
                        $.each(checkList, function (index, item) {
                            idArr.push(item.id);
                        });
                        var confirm = layer.confirm('你确定要删除?', {title: '执行操作', btn: ['是', '否']}, function () {
                            $.ajax({
                                url: 'api/poem/delete',
                                type: 'post',
                                data: {"id": idArr[0]},
                                dataType: 'json',
                                success: function (resp) {
                                    console.log(resp);
                                    layer.close(confirm);
                                    if (resp.code) {
                                        $(tableId).datagrid('reload');
                                    } else {
                                        layer.msg(resp.message);
                                    }
                                }
                            });
                        });
                    }
                }
            ]
        };
        var searchFieldSelect = ['dynasty', 'poem_level'];
        var searchFieldInput = ['title', 'poet', 'content'];
        var functionName = 'poem_list';
        // initComboboxOption(functionName, searchFieldSelect)
        $(tableId).datagrid(configDatagrid).datagrid("enableCellEditing");

        $(searchBtnId).click(function () {
            refreshTableList(functionName, searchFieldSelect, searchFieldInput);
        });

        $(".wrapper-bz-filter input").keyup(function (e) {
            if (13 == e.keyCode) {
                refreshTableList(functionName, searchFieldSelect, searchFieldInput);
            }
        });

        $(resetBtnId).click(function () {
            filterConfig = {};
            $.each(searchFieldSelect, function (index, fieldName) {
                var id = "#ele_select_" + fieldName + "_in_" + functionName;
                $(id).combobox('setValue', '');
                filterConfig[fieldName] = '';
            });
            $.each(searchFieldInput, function (index, fieldName) {
                var id = "#ele_input_" + fieldName + "_in_" + functionName;
                $(id).textbox('setValue', '');
                filterConfig[fieldName] = '';
            });
            configDatagrid.queryParams = filterConfig;
            $(tableId).datagrid(configDatagrid).datagrid('enableCellEditing');
        });

        function refreshTableList(functionName, searchFieldSelect, searchFieldInput) {
            filterConfig = {};
            $.each(searchFieldSelect, function (index, fieldName) {
                var id = "#ele_select_" + fieldName + "_in_" + functionName;
                filterConfig[fieldName] = $(id).combobox('getValue');
                // $.extend(filterConfig, {fieldName: $(id).combobox('getValue')})
            });
            $.each(searchFieldInput, function (index, fieldName) {
                var id = "#ele_input_" + fieldName + "_in_" + functionName;
                filterConfig[fieldName] = $(id).textbox('getValue');
                // $.extend(filterConfig, {fieldName: $(id).textbox('getValue')})
            });
            configDatagrid.queryParams = filterConfig;
            $(tableId).datagrid(configDatagrid).datagrid('enableCellEditing');
        }

        function getRowDetailHtml(row) {
            var html = '<div class="pop-content">';
            html += '<div class="column flex3">';
            html += '<div class="poem-title">' + row.title + '</div>';
            html += '<div class="poem-poet">' + row.dynasty + '.' + row.poet + '</div>';
            html += '<div class="poem-content">' + row.content.replaceAll('\r\n', '<br>') + '</div>';
            html += '</div>';
            html += '<div class="column flex5">';
            html += '<div class="poem-annotation"><div class="label-title">注释：</div>' + row.annotation.replaceAll('\r\n', '<br>') + '</div>';
            html += '<div class="poem-translation"><div class="label-title">译文：</div>' + row.translation.replaceAll('\r\n', '<br>') + '</div>';
            html += '<div class="poem-description">' + row.description.replaceAll('\r\n', '<br>') + '</div>';
            html += '</div>';
            return html;
        }

        function getCheckedRowData(opText) {
            var checkList = $(tableId).datagrid('getChecked');
            console.log(checkList);
            if (checkList.length < 1) {
                layer.msg('请选择要' + opText + '的数据');
                return false;
            }
            return checkList;
        }
    });
</script>